<template>
    <view class="w-screen h-screen flex flex-col" :style="themeColor()">
        <view class="flex-1">
            <!-- #ifdef H5 -->
            <view class="h-[100rpx]"></view>
            <!-- #endif -->
            <view class="px-[60rpx] pt-[180rpx] mb-[100rpx] flex position_fu">
                <img src="@/image/login/logo.png" alt="" class="h-[346rpx] w-[379rpx] logo_cl"/>
                <view class="text-[48rpx] position_zhao text-[#fff]">{{ t('login') }}
                  <view class="mt-[20rpx]">{{ t('loginTip') }}<text class="text-[#B13F3F] font-bold">{{ t('loginTips') }}</text>
                  </view>
                </view>
            </view>
            <!-- todo fix by mine -->
            <view class="px-[60rpx] text-sm flex mb-[50rpx] font-bold leading-none" v-if="loginType.length > 1 &&  !isWexin">
                <block v-for="(item, index) in loginType">
                    <view :class="{'text-gray-300' : item.type != type}" @click="type = item.type">{{ item.title }}</view>
                    <view class="mx-[30rpx] border-solid border-0 border-r-[2px] border-gray-300" v-show="index == 0"></view>
                </block>
            </view>
            <view class="px-[60rpx] mt-[160rpx]">
                <u-form labelPosition="left" :model="formData" errorType='toast' :rules="rules" ref="formRef">
                  <!-- todo fix by mine -->
                    <view  v-if="!isWexin">
                      <view v-show="type == 'username'">
                          <u-form-item label="" prop="username" :border-bottom="false">
                            <img src="@/image/login/input_l.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                              <u-input v-model="formData.username" border="none" clearable :placeholder="t('usernamePlaceholder')" autocomplete="off" class="!bg-transparent" :disabled="real_name_input" fontSize="26rpx" placeholderClass="!text-[#999999] text-[26rpx]"/>
                            <img src="@/image/login/input_r.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                          </u-form-item>
                          <view class="mt-[40rpx]">
                              <u-form-item label="" prop="password" :border-bottom="false">
                                <img src="@/image/login/input_l.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                                  <u-input v-model="formData.password" border="none" type="password" clearable :placeholder="t('passwordPlaceholder')" autocomplete="new-password" class="!bg-transparent" :disabled="real_name_input" fontSize="26rpx" placeholderClass="!text-[#999999] text-[26rpx]"/>
                                <img src="@/image/login/input_r.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                              </u-form-item>
                          </view>
                      </view>
                      <view v-show="type == 'mobile'">
                          <u-form-item label="" prop="mobile" :border-bottom="false">
                            <img src="@/image/login/input_l.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                              <u-input v-model="formData.mobile" border="none" clearable :placeholder="t('mobilePlaceholder')"  autocomplete="off" class="!bg-transparent" :disabled="real_name_input" fontSize="26rpx"  placeholderClass="!text-[#999999]"/>
                            <img src="@/image/login/input_r.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                          </u-form-item>
                          <view class="mt-[40rpx]">
                              <u-form-item label="" prop="mobile_code" :border-bottom="false">
                                <img src="@/image/login/input_l.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                                  <u-input v-model="formData.mobile_code" border="none" clearable class="!bg-transparent" fontSize="26rpx"  :disabled="real_name_input" :placeholder="t('codePlaceholder')" placeholderClass="!text-[#999999]">
                                      <template #suffix>
                                          <sms-code :mobile="formData.mobile" type="login" v-model="formData.mobile_key"></sms-code>
                                      </template>
                                  </u-input>
                                <img src="@/image/login/input_r.png" alt="" class="h-[108rpx] w-[33rpx]"/>
                              </u-form-item>
                          </view>
                      </view>
                      <view class="mt-[80rpx]">
                          <button hover-class="none" class="bg-[#B13F3F] text-[#fff] h-[80rpx] leading-[80rpx] text-[28rpx]" :loading="loading" :loadingText="t('logining')" @click="handleLogin">{{t('loginBtn')}}</button>
                      </view>
                      <view class="flex text-xs justify-center mt-[30rpx] text-[#FFFFFF] al-c">
                        <view @click="redirect({ url: '/app/pages/auth/register' })">
                          <!--                            {{ t('noAccount') }}-->
                          <!--                              <text class="text-primary">{{ t('toRegister') }}</text>-->
                          {{ t('toRegister') }}
                        </view>
                        <view class="h-[22rpx] w-[1rpx] bg-[#fff] ml-[30rpx] mr-[30rpx]"></view>
                        <view @click="redirect({ url: '/app/pages/auth/resetpwd' })">{{ t('resetpwd') }}</view>
                      </view>
                    </view>
                    <!-- todo fix by mine -->
                    <view class="mt-[20rpx]" v-if="configStore.login.is_auth_register && isWexin">
                        <button hover-class="none" class="text-[var(--primary-color)] bg-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[28rpx]" :loading="loginLoading" :loadingText="t('logining')" @click="oneClickLogin">{{t('oneClicklogin')}}</button>
                    </view>
                    <!-- todo fix by mine -->
                    <view class="mt-[20rpx]" v-else-if="type == 'mobile' && isWexin">
                        <u-button :customStyle="{border:'none',color:'var(--primary-color)',fontSize:'26rpx',height:'40rpx', lineHeight:'40rpx'}" :text="t('mobileQuickLogin')" open-type="getPhoneNumber" @getphonenumber="mobileAuth" @click="checkWxPrivacy"></u-button>
                    </view>

                </u-form>
            </view>
        </view>
        <view class="text-xs py-[50rpx] flex justify-center w-full" v-if="configStore.login.agreement_show">
            <text class="iconfont text-[var(--primary-color)] text-[34rpx] mr-[12rpx]" :class="isAgree ? 'iconxuanze1' : 'nc-iconfont nc-icon-yuanquanV6xx'" @click="isAgree = !isAgree"></text>
            {{ t('agreeTips') }}
<!--            <view @click="redirect({ url: '/app/pages/auth/agreement?key=service' })">-->
<!--                <text class="text-primary">{{ t('userAgreement') }}</text>-->
<!--            </view>-->
            <view @click="fwxy_show = true">
                <text class="text-primary">{{ t('userAgreement') }}</text>
            </view>
<!--            {{ t('and') }}-->
<!--            <view @click="redirect({ url: '/app/pages/auth/agreement?key=privacy' })">-->
<!--                <text class="text-primary">{{ t('privacyAgreement') }}</text>-->
<!--            </view>-->
          <view @click="ysxy_show = true">
            <text class="text-primary">{{ t('privacyAgreement') }}</text>
          </view>
        </view>
        <view v-if="fwxy_show" class="fwxy-class">
          <view style="position: relative;height: 69%;width: 100%;margin-top: 52%;">
            <view class="bg_one"></view>
            <view class="treaty_content text-[#ffffff]">
              <u-parse :content="agreement.content" :tagStyle="{img: 'vertical-align: top;'}"></u-parse>
            </view>
            <view class="bg_two"></view>
            <view class="titleBox"></view>
            <view class="close-image-class" @click="fwxy_show = false">
              <image src="@/image/login/close-icon.png" style="width: 100%;height: 100%"/>
            </view>
          </view>
        </view>
        <view v-if="ysxy_show" class="fwxy-class">
          <view style="position: relative;height: 69%;width: 100%;margin-top: 52%;">
            <view class="bg_one"></view>
            <view class="treaty_content text-[#ffffff]">
              <u-parse :content="agreement1.content" :tagStyle="{img: 'vertical-align: top;'}"></u-parse>
            </view>
            <view class="bg_two"></view>
            <view class="titleBox titleBox1"></view>
            <view class="close-image-class" @click="ysxy_show = false">
              <image src="@/image/login/close-icon.png" style="width: 100%;height: 100%"/>
            </view>
          </view>
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <!-- 小程序隐私协议 -->
        <wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
        <!-- #endif -->
    </view>
</template>

<script setup lang="ts">
    import { ref, reactive, computed, onMounted } from 'vue'
    import { usernameLogin, mobileLogin,bind } from '@/app/api/auth'
    import useMemberStore from '@/stores/member'
    import useConfigStore from '@/stores/config'
    import { useLogin } from '@/hooks/useLogin'
    import { t } from '@/locale'
    // todo fix by mine
    import {redirect, getToken, isWeixinBrowser, urlDeconstruction} from '@/utils/common'
    import { onLoad,onShow } from '@dcloudio/uni-app';
    import { getAgreementInfo } from '@/app/api/system'

    const formData = reactive({
        username: '',
        password: '',
        mobile: '',
        mobile_code: '',
        mobile_key: ''
    })

	const real_name_input = ref(true);
  const fwxy_show = ref(false);
  const ysxy_show = ref(false);
  const agreement = ref(null)
  const agreement1 = ref(null)
  // todo fix by mine
  const isWexin = ref(false);
    // #ifdef H5
    if (isWeixinBrowser()) {
      isWexin.value = true;
    }
    let query = urlDeconstruction(location.href).query
    if(query.code){
      redirect({ url: '/app/pages/member/index'})
    }
    // #endif
    // #ifdef MP-WEIXIN
    isWexin.value = true;
    // #endif
    console.log(isWexin);

	onMounted(() => {
    getAgreementInfo('service').then((res: AnyObject) => {
      agreement.value = res.data
    })
    getAgreementInfo('privacy').then((res: AnyObject) => {
      agreement1.value = res.data
    })
		// 防止浏览器自动填充
		setTimeout(()=>{
			real_name_input.value = false;
		},800)
	});

    const memberStore = useMemberStore()
    const configStore = useConfigStore()

    onLoad(async()=>{
        await configStore.getLoginConfig()
        uni.getStorageSync('openid') && (Object.assign(formData, { openid: uni.getStorageSync('openid') }))
        uni.getStorageSync('unionid') && (Object.assign(formData, { unionid: uni.getStorageSync('unionid') }))
        uni.getStorageSync('pid') && (Object.assign(formData, { pid: uni.getStorageSync('pid') }))
        if(!getToken() && !configStore.login.is_username && !configStore.login.is_mobile && !configStore.login.is_bind_mobile){
            uni.showToast({ title: '商家未开启普通账号登录注册', icon: 'none' })
            setTimeout(() => {
                redirect({ url: '/app/pages/index/index', mode: 'reLaunch' })
            }, 100)
        }
    })

    const loading = ref(false)

    const type = ref('')

    const loginType = computed(() => {
        const value = []
        if(configStore.login.is_username){
            value.push({ type: 'username', title: t('usernameLogin') })
        }
        if(configStore.login.is_bind_mobile || configStore.login.is_mobile){
            value.push({ type: 'mobile', title: t('mobileLogin') })
        }
        type.value = value[0] ? value[0].type : ''
        return value
    })

    const rules = computed(() => {
        return {
            'username': {
                type: 'string',
                required: type.value == 'username',
                message: t('usernamePlaceholder'),
                trigger: ['blur', 'change'],
            },
            'password': {
                type: 'string',
                required: type.value == 'username',
                message: t('passwordPlaceholder'),
                trigger: ['blur', 'change']
            },
            'mobile': [
                {
                    type: 'string',
                    required: type.value == 'mobile',
                    message: t('mobilePlaceholder'),
                    trigger: ['blur', 'change'],
                },
                {
                    validator(rule, value) {
                        if (type.value != 'mobile') return true
                        else return uni.$u.test.mobile(value)
                    },
                    message: t('mobileError'),
                    trigger: ['change', 'blur'],
                }
            ],
            'mobile_code': {
                type: 'string',
                required: type.value == 'mobile',
                message: t('codePlaceholder'),
                trigger: ['blur', 'change']
            }
        }
    })

    const isAgree = ref(false)

    const formRef = ref(null)

    const handleLogin = () => {
        formRef.value.validate().then(() => {
            if (configStore.login.agreement_show && !isAgree.value) {
                uni.showToast({ title: t('isAgreeTips'), icon: 'none' });
                return false;
            }

            if (loading.value) return
            loading.value = true

            const login = type.value == 'username' ? usernameLogin : mobileLogin

            login(formData).then((res) => {
                memberStore.setToken(res.data.token)
                if(configStore.login.is_bind_mobile && !res.data.mobile){
                    uni.setStorageSync('isbindmobile', true)
                }
                useLogin().handleLoginBack()
            }).catch(() => {
                loading.value = false
            })
        })
    }

    // todo 一键登录
    const loginLoading = ref(false)
    const oneClickLogin = () =>{
        // 第三方平台自动登录
        if (loginLoading.value) return
        loginLoading.value =true
        // todo fix by mine
        // #ifdef MP-WEIXIN
        const login = useLogin()
        login.getAuthCode('',false,true)
        // #endif
        // #ifdef H5
        if (isWeixinBrowser()) {
          const login = useLogin()
          login.getAuthCode('snsapi_userinfo')
        }
        // #endif
    }
    if(isWexin){
      oneClickLogin();
    }

    const wxPrivacyPopupRef:any = ref(null)

    // 检测是否同意隐私协议
    const checkWxPrivacy = ()=>{
        wxPrivacyPopupRef.value.proactive();
    }
    const mobileAuth = (e) => {
        if (!isAgree.value && configStore.login.agreement_show) {
            uni.showToast({
                title: `${ t('pleaceAgree') }《${ t('userAgreement') }》《${ t('privacyAgreement') }》`,
                icon: 'none'
            })
            return
        }

        const login = useLogin()
        login.getAuthCode('',false,true,(data) => {
            if (e.detail.errMsg == 'getPhoneNumber:ok') {
                uni.showLoading({ title: '' })

                bind({
                    openid:data.openid,
                    unionid:data.unionid,
                    mobile_code: e.detail.code
                }).then((res) => {
                    uni.hideLoading()
                    memberStore.setToken(res.data.token)
                    useLogin().handleLoginBack()

                }).catch((res) => {
                    setTimeout(() => {
                        uni.hideLoading()
                    }, 2000);
                })
            }

            if (e.detail.errno == 104) {
                let msg = '用户未授权隐私权限';
                uni.showToast({ title: msg, icon: 'none' })
            }
            if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
                let msg = '用户拒绝获取手机号码';
                uni.showToast({ title: msg, icon: 'none' })
            }
        })
    }
</script>

<style lang="scss" scoped>
.fwxy-class {
  position: fixed;
  height: 100%;
  width: 100%;
  background: url("../../../image/login/阴影.png") no-repeat;
  background-size: 100% 100%;
}
.bg_one {
  width: 100%;
  height: 289rpx;
  background: url("../../../image/login/bg_1.png") no-repeat;
  background-size: 100%;
  position: absolute;
  top: 15%;
  z-index: -1;
}
.treaty_content {
  width: 80%;
  height: 70%;
  margin: 18% auto 10%;
  background: #2F2F2F;
  border-radius: 12rpx;
  padding: 52rpx 32rpx;
  overflow: auto;
}
.bg_two {
  width: 100%;
  height: 158rpx;
  background: url("../../../image/login/bg_2.png") no-repeat;
  background-size: 100%;
  position: absolute;
  top: 72%;
}
.titleBox {
  width: 444.61rpx;
  height: 183.61rpx;
  background: url("../../../image/login/fwxy.png") no-repeat;
  background-size: 100%;
  position: absolute;
  left: 68rpx;
  top: -150rpx;
}
.titleBox1 {
  background: url("../../../image/login/ysxy.png") no-repeat;
  background-size: 100%;
}
.close-image-class {
  width: 66rpx;
  height: 66rpx;
  position: absolute;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
}
	.u-input{
		background-color: transparent !important;
	}
  uni-page-body {
    background-color: #0C0C16;
    background-image: url('../../../image/login/login_bg.png');
    background-repeat: no-repeat;
    background-size:100%;
  }
  .u-form-item {
    background: rgba(47, 47, 47, .7);
    box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.42);
    border-radius: 4rpx;
    color: #999999;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 34rpx;
  }
  :deep(.uni-input-input) {
    color: #FFFFFF;
  }
  :deep(.u-form-item__body) {
    padding: 0 !important;
  }
  .al-c {
    align-items: center;
  }
  .logo_cl {
    position: absolute;
    top: 24rpx;
    left: -30rpx;
  }
  .position_fu {
    position: relative;
  }
  .position_zhao {
    position: absolute;
    left: 230rpx;
    top: 160rpx;
  }
</style>
